import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import { useGlobalStore } from "@/store";

import Layout from "@/layout/index.vue";

import { GITEE_URL, HOME_URL, LOGIN_URL } from "@/config/config";
// import { GITHUB_URL } from "@/config/config";
import NProgress from "@/config/nprogress";

// 目前requiresAuth，keepAlive，key，name都没用

const routes: RouteRecordRaw[] = [
	{
		path: "/",
		redirect: LOGIN_URL,
		meta: {
			hidden: true
		}
	},
	{
		path: "/login",
		name: "login",
		component: () => import("@/views/login/index.vue"),
		meta: {
			requiresAuth: false,
			title: "登录页",
			key: "login",
			hidden: true
		}
	},
	{
		path: "/home",
		component: Layout,
		// 这里如果路由换后端的话，可以改回来
		redirect: HOME_URL,
		meta: {
			title: "首页",
			icon: "Menu"
		},
		children: [
			{
				path: HOME_URL,
				// 这里就不写index了，好一些
				name: "homeIndex",
				component: () => import("@/views/home/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "首页",
					key: "homeIndex",
					icon: "Menu"
				}
			}
		]
	},
	{
		path: "/superTable",
		component: Layout,
		redirect: "/superTable/superTableDemo",
		meta: {
			title: "超级表格",
			icon: "Menu"
		},
		children: [
			{
				path: "/superTable/superTableDemo",
				name: "superTableDemo",
				component: () => import("@/views/superTable/superTableDemo.vue"),
				meta: {
					requiresAuth: false,
					title: "超级表格demo",
					key: "superTableDemo",
					icon: "Menu"
				}
			}
		]
	},
	{
		path: "/dashboard",
		component: Layout,
		redirect: "/dashboard/dataVisualize",
		meta: {
			title: "Dashboard",
			icon: "Menu"
		},
		children: [
			{
				path: "/dashboard/dataVisualize",
				name: "dataVisualize",
				component: () => import("@/views/dashboard/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "数据可视化",
					key: "dataVisualize",
					icon: "Menu"
				}
			},
			{
				path: "/dashboard/embedded",
				name: "embedded",
				component: () => import("@/views/dashboard/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "内嵌页面",
					key: "embedded",
					icon: "Menu"
				}
			}
		]
	},
	{
		path: "/menu",
		component: Layout,
		// 这里的redirect必须得嵌套起来，不然在面包屑导航点击的时候会出问题
		redirect: "/menu/menu1",
		meta: {
			title: "菜单嵌套",
			icon: "Menu"
		},
		children: [
			{
				path: "/menu/menu1",
				name: "menu1",
				component: () => import("@/views/menu/index.vue"),
				redirect: "/menu/menu1/menu1-1",
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "menu1",
					key: "menu1",
					icon: "Menu"
				},
				children: [
					{
						path: "/menu/menu1/menu1-1",
						name: "menu1-1",
						component: () => import("@/views/menu/index.vue"),
						meta: {
							keepAlive: true,
							requiresAuth: true,
							title: "menu1-1",
							key: "menu1-1",
							icon: "Menu"
						}
					},
					{
						path: "/menu/menu1/menu1-2",
						name: "menu1-2",
						component: () => import("@/views/menu/index.vue"),
						meta: {
							keepAlive: true,
							requiresAuth: true,
							title: "menu1-2",
							key: "menu1-2",
							icon: "Menu"
						}
					}
				]
			},
			{
				path: "/menu/menu2",
				name: "menu2",
				component: () => import("@/views/menu/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "menu2",
					key: "menu2",
					icon: "Menu"
				}
			}
		]
	},
	{
		path: "/error",
		component: Layout,
		redirect: "/error/404",
		meta: {
			title: "Error",
			icon: "Menu"
		},
		children: [
			{
				path: "/error/404",
				name: "404",
				component: () => import("@/views/error/404.vue"),
				meta: {
					requiresAuth: false,
					title: "404页面",
					key: "404",
					icon: "Menu"
				}
			},
			{
				path: "/error/500",
				name: "500",
				component: () => import("@/views/error/500.vue"),
				meta: {
					requiresAuth: false,
					title: "500页面",
					key: "500",
					icon: "Menu"
				}
			}
		]
	},
	{
		path: "/link",
		component: Layout,
		redirect: "/link/gitee",
		meta: {
			title: "Link",
			icon: "Menu"
		},
		children: [
			{
				path: "/link/gitee",
				name: "gitee",
				component: () => import("@/views/link/gitee.vue"),
				meta: {
					requiresAuth: false,
					title: "gitee",
					key: "gitee",
					icon: "Menu",
					isLink: GITEE_URL
				}
			}
			// {
			// 	path: "/link/github",
			// 	name: "github",
			// 	component: () => import("@/views/link/github.vue"),
			// 	meta: {
			// 		requiresAuth: false,
			// 		title: "github",
			// 		key: "github",
			// 		icon: "Menu",
			// 		isLink: GITHUB_URL
			// 	}
			// }
		]
	},
	// 路由里面的错误页面是嵌套在layout里面的，这里就是外面的
	{
		path: "/allError",
		name: "allError",
		component: () => import("@/views/error/404.vue"),
		meta: {
			hidden: true
		}
	},
	{
		path: "/serveError",
		name: "serveError",
		component: () => import("@/views/error/500.vue"),
		meta: {
			hidden: true
		}
	},
	{
		// 找不到路由重定向到404页面
		path: "/:pathMatch(.*)",
		redirect: "/allError",
		meta: {
			hidden: true
		}
	}
];

const router = createRouter({
	history: createWebHashHistory(),
	routes,
	strict: false,
	// 切换页面，滚动到最顶部
	scrollBehavior: () => ({ left: 0, top: 0 })
});

// 路由拦截
router.beforeEach((to, from, next) => {
	NProgress.start();
	// 判断是否有token,没有就去登录
	const globalStore = useGlobalStore();
	// 这个不等于LOGIN_URL一定得加,不然就会一直重复加载
	if (!globalStore.token && to.path !== LOGIN_URL) {
		next({ path: LOGIN_URL });
	}
	next();
});

router.afterEach(() => {
	NProgress.done();
});

export default router;
